<template>
  <div class="app-container">
    <div class="searchform">
      <!-- 查询条件 -->
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="userName" label="客户姓名">
              <el-input v-model="search.userName" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="phone" label="电话">
              <el-input v-model="search.phone" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="orderNo" label="订单号">
              <el-input v-model="search.orderNo" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="seriesId" label="车系">
              <r-select
                v-model="search.seriesId"
                selectid="series_id"
                selectname="series_name"
                url="/productDisplay/getTmSeies"
                model="DMSCLOUD_VEHICLE"
                placeholder="请选择车系"
                filterable
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="orderStatus" label="订单状态">
              <r-select v-model="search.orderStatus" clearable type="9715"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="orderType" label="订单类型">
              <r-select v-model="search.orderType" clearable type="9714"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="payType" label="支付方式">
              <r-select v-model="search.payType" clearable type="3222"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="createdAt" label="订单创建时间">
              <el-date-picker v-model="search.createdAt" value-format="yyyy-MM-dd" type="date"/>
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
            </el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
            </el-button>
          </div>
        </el-row>
      </el-form>
    </div>
    <!-- 活动信息列表 -->
    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">订单维护</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button type="primary" icon="el-icon-download" @click="exportData" >导出</el-button>
          </el-button-group>
        </div>
      </div>
      <baseTable v-loading="loading" ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
        <el-table-column type="index" label="序号" min-width="45"/>
        <el-table-column align="center" label="操作" min-width="140">
          <template slot-scope="scope">
            <el-tooltip class="item" content="明细" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-document" @click="detailOpen(scope.row)"/>
            </el-tooltip>
            <el-tooltip class="item" content="确认取消" placement="bottom">
              <el-button :disabled="scope.row.order_status != 97151001" type="text" style="font-size: 20px;" icon="el-icon-circle-close" @click="cancel(scope.row)"/>
            </el-tooltip>
            <el-tooltip class="item" content="下发" placement="bottom">
              <el-button :disabled="scope.row.order_status != 97151001" type="text" style="font-size: 20px;" icon="el-icon-s-promotion" @click="down(scope.row)"/>
            </el-tooltip>`
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="order_no" label="订单号" min-width="235" />
        <el-table-column :show-overflow-tooltip="true" prop="old_order_no" label="原订单号" min-width="235" />
        <el-table-column prop="customer_name" label="客户名称" min-width="110" />
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="电话" min-width="110" />
        <el-table-column prop="share_name" label="分享人" min-width="110" />
        <el-table-column :show-overflow-tooltip="true" prop="share_phone" label="分享电话" min-width="110" />
        <el-table-column :formatter="filterCode" prop="order_type" label="订单类型" min-width="100" type="9714"/>
        <el-table-column :formatter="filterCode" prop="order_status" label="订单状态" min-width="100" type="9715"/>
        <el-table-column :formatter="filterCode" prop="pay_type" label="支付方式" min-width="100" type="3222"/>
        <el-table-column prop="series_name" label="车系" min-width="120" type="1004"/>
        <el-table-column prop="model_code" label="车型代码" min-width="180" />
        <el-table-column prop="vin" label="底盘号" min-width="180" />
        <el-table-column prop="jyno" label="JY单号" min-width="150" />
        <el-table-column prop="sell_name" label="销售顾问" min-width="110" />
        <el-table-column :formatter="dateFormat" prop="CREATED_AT" label="创建时间" min-width="150" sortable/>
      </BaseTable>
    </div>

    <dealerSelectDialog :open-select.sync="openSelect" :dealer-code="dealerCode" :order-id="orderId" @dealerClose="dealerClose"/>

    <orderDetailDialog ref="" :open-detail.sync="openDetail" :basic="basicInfo" :car="carInfo"/>

    <refundReason :open-cancel.sync="openCancel" :order-id="orderId" @cancelClose="cancelClose"/>
  </div>
</template>

<script>
import { queryOrder, exportOrder } from '@/api/commodity/orderManage/orderMaintenance.js'
import BaseTable from '@/components/BaseTable'
import dealerSelectDialog from './dealerSelectDialog.vue'
import orderDetailDialog from './orderDetailDialog.vue'
import refundReason from './refundReason.vue'
import filterCode from '@/components/Checkbox/filtercode'
import rSelect from '@/components/Select/Select'
import formMixins from '@/mixins/formMixins'
import moment from 'moment'
import { exportFile } from '@/utils'
// eslint-disable-next-line no-unused-vars
import _ from 'lodash'

export default {
  name: 'OrderMaintenance',
  components: {
    BaseTable,
    dealerSelectDialog,
    orderDetailDialog,
    refundReason,
    rSelect,
    filterCode
  },
  mixins: [formMixins],
  data() {
    return {
      loading: false,
      openSelect: false,
      openDetail: false,
      openCancel: false,
      // 搜索栏
      search: {
        limit: 10,
        pageNum: 1,
        userName: '',
        phone: '',
        orderNo: '',
        seriesId: '',
        orderStatus: '',
        orderType: '',
        payType: '',
        createdAt: ''
      },
      dealerCode: '',
      orderId: '',
      basicInfo: {},
      carInfo: [],
      orderInfo: []
    }
  },
  computed: {},
  mounted() {
    this.searchHandle()
  },
  methods: {
    // 查询订单信息
    searchHandle() {
      this.loading = true
      const table = this.$refs['table']
      queryOrder(this.search)
        .then(res => {
          for (var i = 0; i < res.rows.length; i++) {
            if (res.rows[i].share_phone === 'undefined' || res.rows[i].share_phone === null) {
              res.rows[i].share_phone = ''
            }
          }
          table.complete().filData(res)
          this.loading = false
        })
        .catch(err => {
          table.complete()
        })
    },

    // 确认取消
    cancel(data) {
      this.orderId = data.order_id
      this.openCancel = true
    },

    // 打开经销商选择框
    down(data) {
      this.dealerCode = data.dealer_code
      this.orderId = data.order_id
      this.openSelect = true
    },

    // 打开订单详情框
    detailOpen(data) {
      this.basicInfo = {
        orderId: data.order_id,
        userName: data.customer_name,
        phone: data.phone,
        orderNo: data.order_no,
        orderStatus: data.order_status,
        orderType: data.order_type,
        payType: data.pay_type,
        payAmount: data.price,
        activityCode: data.activity_code,
        activityPageTheme: data.activity_page_theme,
        dealerCode: data.dealer_code,
        dealerName: data.dealer_name,
        salesConsultant: data.sell_name,
        jyNo: data.jyno,
        createdAt: data.CREATED_AT
      }
      this.carInfo = [{
        SERIES_NAME: data.series_name,
        CAR_MODEL_CODE: data.model_code,
        CAR_MODEL_DES: data.product_desc,
        VIN: data.vin
      }]
      this.openDetail = true
    },

    // 导出
    exportData() {
      exportOrder(this.search)
        .then(res => {
          for (let i = 0; i < res.length; i++) {
            res[i].CREATED_AT = moment(res[i].CREATED_AT).format('YYYY-MM-DD HH:mm')
          }
          const option = {
            tHeader: ['客户姓名', '电话', '订单号', '原订单号', '分享人', '分享电话', '车系', '订单状态', '订单类型', '支付方式', '车型代码', '底盘号', 'JY单号', '销售顾问', '订单创建时间'],
            filterVal: ['customer_name', 'phone', 'order_no', 'old_order_no', 'share_name', 'share_phone', 'series_name', 'order_status', 'order_type', 'pay_type', 'model_code', 'vin', 'jyno', 'sell_name', 'CREATED_AT'],
            table: res,
            fileName: '订单维护查询导出'
          }
          exportFile(option, () => {
          })
        })
        .catch(err => {})
    },

    // 日期格式化
    dateFormat: function(row, column) {
      var date = row[column.property]
      if (date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    },

    dealerClose() {
      this.dealerCode = ''
      this.orderId = ''
      this.openSelect = false
      this.searchHandle()
    },

    cancelClose() {
      this.orderId = ''
      this.openCancel = false
      this.searchHandle()
    }

  }
}
</script>

<style scoped>
</style>
